<template>
	<view class='ws-page'>
		<view class="ws-bookshelf">
			<uni-swipe-action class='ws-book-swipe'>
				<uni-swipe-action-item v-for="(book,index) in collectList" :options="options" :key="book.Id" @change="swipeChange"
				 @click="swipeClick($event,index)">
					<view class="book-swipe-item" @click='watchBookInfoEvent(book.Id)'>
						<image class='ws-book-img' :src="imgUrl+book.Img" mode="aspectFit"></image>
						<view class="ws-book-info">
							<view class='ws-bookshelf-name'>{{book.Name}}</view>
							<view class="ws-bookshelf-author">{{book.Author}}</view>
							<view class="ws-bookshelf-newcatalog">{{book.LastChapter}}</view>
							<view class="ws-bookshelf-newtime">{{book.LastTime}}</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem,
		},
		data() {
			return {
				imgUrl: 'https://imgapi.jiaston.com/BookFiles/BookImages/',
				collectList: [],
				options: [{
					text: '置顶'
				}, {
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}]
			};
		},
		onShow() {
			this.collectList = uni.getStorageSync('collectList') || [];
		},
		methods: {
			swipeChange() {
				console.log('chang')
			},
			swipeClick(e, index) {
				console.log(e)
				let { content } = e
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: (res) => {
							if (res.confirm) {
								this.collectList.splice(index, 1)
								uni.setStorageSync('collectList',this. collectList);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				if (content.text === '置顶') {
					let topBook = this.collectList.splice(index, 1)[0]
					this.collectList.unshift(topBook)
					uni.setStorageSync('collectList',this. collectList);
				}
			},
			watchBookInfoEvent(id) {
				uni.navigateTo({
					url: `/pages/books/bookInfo/bookInfo?bookid=${id}`
				});
			},
		}
	}
</script>

<style lang="scss">
	.ws-page {
		padding: 20rpx 0;

		.ws-bookshelf {
			display: flex;
			flex-wrap: wrap;

			.ws-book-swipe {
				width: 100%;

				.uni-swipe {
					margin-bottom: 4rpx;
				}
			}

			.book-swipe-item {
				padding: 20rpx 15rpx;
				display: flex;
				align-items: center;

				.ws-book-img {
					width: 180rpx;
					height: 200rpx;
				}
				.ws-book-info {
					margin-left: 20rpx;

					.ws-bookshelf-name {
						font-size: 32rpx;
						color: #666;
					}

					.ws-bookshelf-author {
						font-size: 28rpx;
						color: #666;
						line-height: 56rpx;
					}

					.ws-bookshelf-newcatalog {
						font-size:28rpx;
						color: #666;
						line-height: 56rpx;
					}

					.ws-bookshelf-newtime {
						font-size: 32rpx;
						color: #666;
						line-height: 56rpx;
					}
				}

			}

		}

	}
</style>
